<div id="side">
    <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            background-color="#2f363c"
            text-color="#fff"
            active-text-color="#ffd04b">
        <div class="userinfo">
            <el-image class="user-avatar"
                    style="width: 60px; height: 60px"
                    :src="'{$user.avatar|htmlentities}'">
            </el-image>
            <span>{$user.nickname|htmlentities}</span>
        </div>
        <template v-for="(item,index) in nav">
            <el-menu-item :index="(1 + index).toString()" @click="goto(item.url)">
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </template>
    </el-menu>
</div>
<script>
    new Vue({
        el: '#side',
        data: function() {
            return {
                nav: [
                    // {
                    //     "name": "控制台",
                    //     "url": "/kzvote",
                    //     "icon": "el-icon-s-grid",
                    // },
                    {
                        "name": "投票活动",
                        "url": "/kzvote",
                        "icon": "el-icon-s-opportunity",
                    },
                    {
                        "name": "投票作品",
                        "url": "/kzvote/person",
                        "icon": "el-icon-user-solid",
                    },
                    // {
                    //     "name": "投票分组",
                    //     "url": "/kzvote/group",
                    //     "icon": "el-icon-s-home",
                    // },
                    {
                        "name": "投票记录",
                        "url": "/kzvote/log",
                        "icon": "el-icon-s-order",
                    },
                    {
                        "name": "投票弹幕",
                        "url": "/kzvote/review",
                        "icon": "el-icon-s-platform",
                    },
                ],
                activeIndex: '1'
            }
        },
        created() {
            let url = '{$url|htmlentities}'
            console.log(url)
            let activeIndex = '1'
            this.nav.forEach(function (item, index) {
                if (item.url === url) {
                    activeIndex = (index + 1).toString();
                }
            });
            this.activeIndex = activeIndex
        },
        methods: {
            goto(url) {
                location.href = url
            },
        }
    })
</script>
<style>
    .userinfo{
        padding: 20px 0 20px 20px;
    }
    .user-avatar{
        border-radius: 50%;
        vertical-align:middle;
    }
    .userinfo span{
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        overflow: hidden;
        width: 120px;
        display: inline-block;
    }

    .el-menu{
        height: 100vh;
    }
</style>